<template>
  <div class="left">
    <el-row class="but-l">
      <el-button type="primary" round>打开相机</el-button>
      <el-button type="info" round style="margin-left: 10px">关闭相机</el-button>
    </el-row>
    <div class="box">
      <dv-border-box12>
        <img :src=picurl style="margin-top: 10px;margin-left:12px; height: 450px;width: 830px;margin-bottom: 10px">
      </dv-border-box12>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      websock: null, // 建立的连接
      lockReconnect: false, // 是否真正建立连接
      timeout: 28 * 1000, // 30秒一次心跳
      timeoutObj: null, // 外层心跳倒计时
      serverTimeoutObj: null, // 内层心跳检测
      timeoutnum: null, // 断开 重连倒计时
      // picurl: ''
    }
  },
  mounted: function () {
    this.initWebSocket()
    console.log(this.test)
  },
  beforeUnmount: function () {
    // 页面离开时断开连接,清除定时器
    this.disconnect()
    clearInterval(this.timer)
  },
  methods: {
    initWebSocket () {
      // 初始化weosocket
      const wsuri = 'ws://127.0.0.1:5000/test'
      this.websock = new WebSocket(wsuri)
      this.websock.onopen = this.websocketonopen
      this.websock.onmessage = this.websocketonmessage
      this.websock.onerror = this.websocketonerror
      this.websock.onclose = this.websocketclose
      this.websock.onsend = this.websocketsend
    },
    reconnect () {
      // 重新连接
      var that = this
      if (that.lockReconnect) {
        // 是否真正建立连接
        return
      }
      that.lockReconnect = true
      // 没连接上会一直重连，设置延迟避免请求过多
      that.timeoutnum && clearTimeout(that.timeoutnum)
      // 如果到了这里断开重连的倒计时还有值的话就清除掉
      that.timeoutnum = setTimeout(function () {
        // 然后新连接
        that.initWebSocket()
        that.lockReconnect = false
      }, 5000)
    },
    reset () {
      // 重置心跳
      var that = this
      // 清除时间（清除内外两个心跳计时）
      clearTimeout(that.timeoutObj)
      clearTimeout(that.serverTimeoutObj)
      // 重启心跳
      that.start()
    },
    start () {
      // 开启心跳
      var self = this
      self.timeoutObj && clearTimeout(self.timeoutObj)
      // 如果外层心跳倒计时存在的话，清除掉
      self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj)
      // 如果内层心跳检测倒计时存在的话，清除掉
      self.timeoutObj = setTimeout(function () {
        // 重新赋值重新发送 进行心跳检测
        // 这里发送一个心跳，后端收到后，返回一个心跳消息，
        if (self.websock.readyState === 1) {
          // 如果连接正常
          self.websock.send('heartCheck')
        } else {
          // 否则重连
          self.reconnect()
        }
        self.serverTimeoutObj = setTimeout(function () {
          // 在三秒一次的心跳检测中如果某个值3秒没响应就关掉这次连接
          // 超时关闭
          self.websock.close()
        }, self.timeout)
      }, self.timeout)
      // 3s一次
    },

    websocketonopen (e) {
      // 连接建立之后执行send方法发送数据
      console.log('成功', e)
      const actions = 123
      this.websocketsend(JSON.stringify(actions))
    },
    websocketonerror () {
      // 连接建立失败重连
      console.log('失败')
      this.initWebSocket()
    },
    websocketonmessage (e) {
      // 数据接收
      const redata = JSON.stringify(e.data) // 使用json.stringify将base64编码转为字符串
      console.log('图片', redata)
      console.log('接收', e)
      this.picurl = 'data:image/png;base64,' + redata
      this.picurl = this.picurl.replaceAll('"', '')
      console.log(this.picurl)
      // console.log('接收', e)
      // this.aa = [...this.aa, redata.type];
      const actions = 123
      this.websocketsend(JSON.stringify(actions))
      this.reset()
    },
    websocketsend (Data) {
      // 数据发送
      console.log('发送', Data)
      this.websock.send(Data)
    },
    websocketclose (e) {
      // 关闭
      console.log('断开连接', e)
    }
  }
}

</script>

<style lang="scss">
.left{
  flex-direction: column;
  display: flex;
  width: 50%;
  height: 70%;
  margin-left: 150px;
}
.dv-decoration-12{
  width: 50%;
}
.box{
  display: flex;
  margin-top: 10px;
}
.but-l{
  justify-content:space-around;
}
</style>
